HTML அடிப்படை எடுத்துக்காட்டுகள்
இந்த அத்தியாயத்தில் நாங்கள் சில அடிப்படை HTML எடுத்துக்காட்டுகளைக் காண்பிப்போம்.
நாங்கள் இதுவரை கற்றுக்கொள்ளாத குறிச்சொற்களைப் பயன்படுத்தினால் கவலைப்பட வேண்டாம்.
HTML ஆவணங்கள்
அனைத்து HTML ஆவணங்களும் ஒரு ஆவண வகை அறிவிப்புடன் தொடங்க வேண்டும்: <!DOCTYPE html>.
HTML ஆவணம் தானே <html> உடன் தொடங்கி </html> உடன் முடிகிறது.
HTML ஆவணத்தின் தெரியும் பகுதி <body> மற்றும் </body> இடையே உள்ளது.
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html><!DOCTYPE> அறிவிப்பு
<!DOCTYPE> அறிவிப்பு ஆவண வகையைக் குறிக்கிறது, மேலும் வலைப்பக்கங்களை உலாவிகள் சரியாகக் காட்சிப்படுத்த உதவுகிறது.
இது ஒருமுறை மட்டுமே, பக்கத்தின் மேற்பகுதியில் (எந்த HTML குறிச்சொற்களுக்கும் முன்) தோன்ற வேண்டும்.
<!DOCTYPE> அறிவிப்பு வழக்கு-உணர்திறன் அற்றது (case sensitive அல்ல).
HTML5 க்கான <!DOCTYPE> அறிவிப்பு:
<!DOCTYPE html>உதவிக்குறிப்பு:
எப்போதும் உங்கள் HTML கோப்புகளின் முதல் வரியாக <!DOCTYPE html> ஐ சேர்க்கவும். இது உலாவிக்கு இது HTML5 ஆவணம் என்பதை அறிவிக்கிறது.
HTML தலைப்புகள்
HTML தலைப்புகள் <h1> முதல் <h6> வரையிலான குறிச்சொற்களால் வரையறுக்கப்படுகின்றன.
<h1> மிக முக்கியமான தலைப்பை வரையறுக்கிறது. <h6> குறைந்த முக்கியத்துவம் வாய்ந்த தலைப்பை வரையறுக்கிறது:
எடுத்துக்காட்டு
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3><h1> - முதன்மை தலைப்பு
பக்கத்தின் முக்கிய தலைப்பு. ஒரு பக்கத்தில் பொதுவாக ஒரே ஒரு <h1> இருக்க வேண்டும்.
<h2> - <h6>
துணைத் தலைப்புகள். <h2> மிக முக்கியமானது, <h6> குறைந்த முக்கியத்துவம் வாய்ந்தது.
HTML பத்திகள்
HTML பத்திகள் <p> குறிச்சொல்லால் வரையறுக்கப்படுகின்றன:
எடுத்துக்காட்டு
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>குறிப்பு:
உரையை பத்திகளாகப் பிரிக்க <p> குறிச்சொல்லைப் பயன்படுத்தவும். ஒவ்வொரு புதிய பத்திக்கும் ஒரு புதிய <p> குறிச்சொல்லைத் தொடங்கவும்.
HTML இணைப்புகள்
HTML இணைப்புகள் <a> குறிச்சொல்லால் வரையறுக்கப்படுகின்றன:
எடுத்துக்காட்டு
<a href="https://www.jassifteam.com">This is a link</a>இணைப்பின் இலக்கு href பண்புக்கூறில் குறிப்பிடப்பட்டுள்ளது.
பண்புக்கூறுகள் HTML உறுப்புகள் பற்றிய கூடுதல் தகவலை வழங்க பயன்படுகின்றன.
பண்புக்கூறுகளைப் பற்றி மேலும் பின்னர் ஒரு அத்தியாயத்தில் கற்றுக்கொள்வீர்கள்.
இணைப்பு குறிச்சொல்
<a href="URL">இணைப்பு உரை</a>
href பண்புக்கூறு
இணைப்பின் இலக்கு URL ஐக் குறிப்பிடுகிறது
HTML படங்கள்
HTML படங்கள் <img> குறிச்சொல்லால் வரையறுக்கப்படுகின்றன.
மூலக் கோப்பு (src), மாற்று உரை (alt), அகலம் (width), மற்றும் உயரம் (height) ஆகியவை பண்புக்கூறுகளாக வழங்கப்படுகின்றன:
எடுத்துக்காட்டு
<img src="jassifteam.jpg" alt="Jassif Team Logo" width="104" height="142">கவனிக்க:
alt பண்புக்கூறு படத்தைக் காண முடியாதபோது அல்லது படம் ஏற்றப்படாதபோது காட்சிப்படுத்தப்படும் மாற்று உரையை வழங்குகிறது. இது அணுகல்தன்மைக்கு முக்கியமானது.
HTML மூலக் குறியீட்டைக் காணும் முறை
நீங்கள் எப்போதாவது ஒரு வலைப்பக்கத்தைப் பார்த்து "ஏய்! அவர்கள் அதை எப்படிச் செய்தார்கள்?" என்று ஆச்சரியப்பட்டிருக்கிறீர்களா?
HTML மூலக் குறியீட்டைக் காண்க
ஒரு HTML பக்கத்தில் CTRL + U ஐ கிளிக் செய்யவும் அல்லது பக்கத்தை வலது-கிளிக் செய்து "View Page Source" எனத் தேர்ந்தெடுக்கவும். இது பக்கத்தின் HTML மூலக் குறியீட்டைக் கொண்ட ஒரு புதிய தாவலைத் திறக்கும்.
HTML உறுப்பை ஆய்வு செய்க
ஒரு உறுப்பின் மீது வலது-கிளிக் செய்து (அல்லது வெற்று பகுதியில்), "Inspect" எனத் தேர்ந்தெடுத்து, எந்த உறுப்புகள் உருவாக்கப்பட்டுள்ளன என்பதைக் காண்க (நீங்கள் HTML மற்றும் CSS இரண்டையும் பார்ப்பீர்கள்). Elements அல்லது Styles பேனலில் திறக்கும் HTML அல்லது CSS ஐ நீங்கள் திருத்தலாம்.
மேம்பாட்டு கருவி:
பக்கத்தில் வலது-கிளிக் செய்து "Inspect" அல்லது F12 விசையை அழுத்தவும். இது உலாவி மேம்பாட்டு கருவிகளைத் திறக்கும், இதன் மூலம் நீங்கள் HTML மற்றும் CSS ஐ உண்மையான நேரத்தில் பார்க்கலாம் மற்றும் திருத்தலாம்.